<template>
    <view class="userhead psr" :style="{width:`${props.width}rpx`,height:`${props.height}rpx`}">

            <!-- elevation="5px" -->
        <view class="bg" :style="{width:`${props.width||140}rpx`,height:`${props.height||140}rpx`}">
            <cacheimg
                class="img"
                :style="{width:`${imgWidth}rpx`,height:`${imgHeight}rpx`,borderRadius:'1000px'}"
                :prview="props.prview"
                mode="aspectFill"
                :saveKey="props.saveKey"
                :src="replaceThumbnail(props?.src) || '/static/head.jpg'"
                :url="props?.url"
            ></cacheimg>

        </view>


        <image
            v-if="props.isVip === 2"
            class="vipimg"
            :style="{width:`${vipWidth}rpx`,height:`${vipHeight}rpx`,left:`${vipLeft}rpx`,bottom:`${vipBottom}rpx`}"
            src="/static/svip.png"
        ></image>
        <image
            v-if="props.isVip === 1"
            class="vipimg"
            :style="{width:`${vipWidth}rpx`,height:`${vipHeight}rpx`,left:`${vipLeft}rpx`,bottom:`${vipBottom}rpx`}"
            src="/static/vip.png"
        ></image>
    </view>
</template>

<script setup lang="ts">
import { onMounted, reactive, watchEffect, toRefs,computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import cacheimg from "@/components/cacheimg.vue";
const props = defineProps({
    width: {
        type: Number||String,
        default:140
    },
    height: {
        type: Number||String,
        default:140
    },
    src: {
        type: String,
        default:'',
    },
    isVip:{
        type: Number,
        default:0,
    },
    saveKey:{
        type: String,
        default:'',
    },
    prview:{
        type: Boolean,
        default:false,
    },
    url: {
        type: String,
        default:null,
    },

});
onLoad(() => {
	//console.log(props.src)
})
const imgHeight = computed(()=>{
    if(props.height){
        return props.height - (props.height * 0.1);
    }

    return 140-14;
})

const imgWidth = computed(()=>{
    if(props.width){
        return props.width - (props.width * 0.1);
    }
    return 140-14;
})

const vipHeight = computed(()=>{
    if(props.width){
        return props.width*0.7/2.25;
    }

    return 140*0.7/2.25;
})

const vipWidth = computed(()=>{
    if(props.width){
        return props.width*0.7;
    }

    return 140*0.7;
})



const vipLeft = computed(()=>{
    if(props.width){
        return props.width*0.15;
    }
    return 140*0.15;
})

const vipBottom = computed(()=>{
    if(props.height){
        return -(props.height*0.05);
    }
    return -(140*0.05);
})
const replaceThumbnail = (imageName:string) => {
	if(!imageName)return null
    if(!imageName.includes("?")){
        imageName=imageName+"?x-oss-process=image/resize,h_60,w_60,m_lfit"
    }
	//https://slim-red.oss-cn-shanghai.aliyuncs.com/init_photo/1060.png at components/userhead.vue:70
	let isAliyun = imageName.indexOf("aliyuncs")
	let isInit = imageName.indexOf("init_photo")
	if(isAliyun > -1 && isInit < 0){
		const dotIndex = imageName.lastIndexOf('.'); // 找到最后一个"."的索引  
		const baseName = dotIndex === -1 ? imageName : imageName.slice(0, dotIndex); // 提取基本名称（不带扩展名）  
	  
		// 检查基本名称是否包含"-big"  
		if (baseName.includes('-big')) {  
			// 如果包含，则替换为"-small"  
			return baseName.replace('-big', '-small') + (dotIndex === -1 ? '' : imageName.slice(dotIndex));  
		} else {  
			if(baseName.includes('-small')){
				return baseName + (dotIndex === -1 ? '' : imageName.slice(dotIndex));  
			}else{
				// 如果不包含，则在基本名称后添加"-small"
				return baseName + '-small' + (dotIndex === -1 ? '' : imageName.slice(dotIndex));  
			}
			
		} 
	}
	return imageName;
}
</script>
<style lang="scss" scoped>
.userhead {
    position: relative;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
	border-radius: 1000px;
	box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0,0,0,0.1);
    .bg{
        display:flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background:#ffffff;
        border-radius: 1000px;
        overflow:hidden;
    }

    .img {
        border-radius: 1000px;
    }

    .vipimg {
        position:absolute;
        /* #ifndef APP-PLUS-NVUE */
        width: 70%;
        z-index:10;
        bottom: -5%;
        overflow: hidden;
        /* #endif */
    }
}
</style>

